const path = require("path")
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

const app = express();
const config = require('./config/webpack.watch.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
	publicPath: config.output.publicPath
}));

app.use(webpackHotMiddleware(compiler, {
	log: console.log,
	path: '/__webpack_hmr',
	heartbeat: 10 * 1000,
}));

// 设置访问静态文件的路径
app.use(express.static(config.output.path)) 
/* 
	webpack-dev-middleware中间件也仅仅只是完成了打包文件向服务器的传输，没有实现热加载也没有实现热更新
	所以还需借助webpack-hot-middleware插件
 */
// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n http://localhost:3000');
});